<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/welcome' }">权限管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row>
				<el-col style="margin-bottom: 30px;">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item label="姓名">
							<el-input v-model="formInline.LoginName"></el-input>
						</el-form-item>
						<el-form-item label="锁定状态" prop="IsLockout" label-width="80px">
							<el-select v-model="formInline.IsLockout">
								<el-option label="--锁定--" value="1"></el-option>
								<el-option label="--未锁定--" value="0"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i></el-button>
							<el-button type="success" @click="ADD"><i class="el-icon-circle-plus"></i></el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-table border :data="usList">
				<el-table-column label="用户编号" prop="Id" width="50px"></el-table-column>
				<el-table-column label="姓名" prop="LoginName" width="100px"></el-table-column>
				<el-table-column label="密码" prop="Password" width="100px"></el-table-column>
				<el-table-column label="创建时间" prop="CreateTime" width="180px"></el-table-column>
				<el-table-column label="密保手机" prop="ProtectMTel" width="160px"></el-table-column>
				<el-table-column label="密保邮箱" prop="ProtectEmail" width="160px"></el-table-column>
				<el-table-column prop="IsLockout" label="是否锁定">
					<template v-slot="scope">
						<el-tooltip content="绿:未锁定 红:锁定" placement="top">
							<el-switch v-model="scope.row.IsLockout" active-color="#13ce66" inactive-color="#ff4949"
								@change="changeStatus(scope.row)" :active-value="0" :inactive-value="1"></el-switch>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column label="锁定时间" prop="LockTime">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.LockTime===null">0000-00-00 00:00:00</el-tag>
						<el-tag type="danger" v-else>{{scope.row.LockTime}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" icon="el-icon-setting" @click="Role(scope.row.Id)">角色
						</el-button>
						<el-button size="mini" type="danger" icon="el-icon-loading" @click="Resert(scope.row.Id)">重置
						</el-button>
						<el-button size="mini" type="warning" icon="el-icon-edit" @click="showBox(scope.row)">编辑
						</el-button>
						<el-button size="mini" type="info" icon="el-icon-delete" @click="DELETE(scope.row.Id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				background :page-sizes="[10, 20, 30, 50]" :page-size="limit"
				layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
			<!-- 新增 -->
			<el-dialog title="新增用户" :visible.sync="dialogFormVisible" @close="AClose">
				<el-form :model="addform" :rules="addFormRules" ref="addFormRef">
					<el-form-item label="姓名" prop="LoginName" label-width="80px">
						<el-input v-model="addform.LoginName"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="Password" label-width="80px">
						<el-input v-model="addform.Password"></el-input>
					</el-form-item>
					<el-form-item label="密保电话" prop="ProtectMTel" label-width="80px">
						<el-input v-model="addform.ProtectMTel"></el-input>
					</el-form-item>
					<el-form-item label="密保邮箱" prop="ProtectEmail" label-width="80px">
						<el-input v-model="addform.ProtectEmail"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button v-on:click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="SUREADD">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 修改 -->
			<el-dialog title="编辑用户" :visible.sync="editdialogFormVisible" @close="EClose">
				<el-form :model="editform" :rules="editFormRules" ref="editFormRef">
					<el-form-item label="密保电话" prop="ProtectMTel" label-width="80px">
						<el-input v-model="editform.ProtectMTel"></el-input>
					</el-form-item>
					<el-form-item label="密保邮箱" prop="ProtectEmail" label-width="80px">
						<el-input v-model="editform.ProtectEmail"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button v-on:click="editdialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="SureEdit">确 定</el-button>
				</div>
			</el-dialog>
			<el-dialog title="你正在设置[xxx]的角色" :visible.sync="dialogRolesFormVisible">
				<div>
					<el-transfer v-model="valuess" :data="datas" :titles="['系统所有角色', '当前所有角色']" @change="handleChange">
					</el-transfer>
				</div>
			</el-dialog>
		</el-card>
	</div>
</template>
<script>
	export default {
		data() {
			//验证邮箱的规则
			var checkEmail = (rule, value, cb) => {
				//验证邮箱的正则表达式
				const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if (regEmail.test(value)) {
					//合法的邮箱
					return cb()
				}
				cb(new Error('请输入合法的邮箱'))
			}
			//验证手机号的规则
			var checkMobile = (rule, value, cb) => {
				//验证手机号的正则表达式
				const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (regMobile.test(value)) {
					//合法的邮箱
					return cb()
				}
				cb(new Error('请输入合法的手机号'))
			}
			return {
				addFormRules: {
					LoginName: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 6,
							message: '用户名的长度在1~6个字符之间',
							trigger: 'blur'
						}
					],
					Password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 8,
							message: '用户名的长度在6~8个字符之间',
							trigger: 'blur'
						}
					],
					ProtectEmail: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						{
							validator: checkEmail,
							trigger: 'blur'
						}
					],
					ProtectMTel: [{
							required: true,
							message: '请输入用户手机',
							trigger: 'blur'
						},
						{
							validator: checkMobile,
							trigger: 'blur'
						}
					]
				},
				editFormRules: {
					ProtectEmail: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						{
							validator: checkEmail,
							trigger: 'blur'
						}
					],
					ProtectMTel: [{
							required: true,
							message: '请输入用户手机',
							trigger: 'blur'
						},
						{
							validator: checkMobile,
							trigger: 'blur'
						}
					]
				},
				formInline: {
					LoginName: '',
					IsLockout: ''
				},
				page: 1,
				limit: 10,
				count: 0,
				usList: [],
				dialogFormVisible: false,
				addform: {
					LoginName: '',
					Password: '',
					ProtectMTel: '',
					ProtectEmail: ''
				},
				editdialogFormVisible: false,
				editform: {
					ProtectMTel: '',
					ProtectEmail: ''
				},
				dialogRolesFormVisible: false,
				datas: null,
				valuess: []
			}
		},
		created() {
			this.GetUserList()
		},
		methods: {
			Role(Id) {
				let _this = this;
				this.$axios.get('/api/api/Us/GetRoles?Id=' + Id)
					.then(function(res) {
						console.log(res);
						if (res.data.code !== 0) {
							_this.datas = res.data.data;
							_this.valuess = res.data.valus;
							_this.userId = res.data.userId;
							_this.dialogRolesFormVisible = true;
							_this.$message.success('该用户没有角色 请添加!')
						}
						_this.datas = res.data.data;
						_this.valuess = res.data.valus;
						_this.userId = res.data.userId;
						_this.dialogRolesFormVisible = true;
					})
			},
			handleChange(value, direction, movedKeys) {
				console.log(value);
				console.log(direction);
				console.log(movedKeys);
				//const roleId=value[0];
				var movedKey = "";
				for (let i = 0; i < movedKeys.length; i++) {
					movedKey = movedKey + movedKeys[i] + ","
				}
				movedKey = movedKey.substring(0, movedKey.length - 1)
				console.log(movedKey);
				console.log(movedKeys.length);
				let _this = this;
				if (direction == "right") {
					this.$axios.get('/api/api/Us/GetUsersRolesAdd?userId=' + _this.userId + "&movedKey=" + movedKey)
						.then(function(res) {
							console.log(res)
							if (res.data.code == 0) {
								_this.$message.success('分配角色成功!')
							}
						})
				}
				if (direction == "left") {
					this.$axios.get('/api/api/Us/GetUsersRolesDel?userId=' + _this.userId + "&movedKey=" + movedKey)
						.then(function(res) {
							console.log(res)
							if (res.data.code == 0) {
								_this.$message.success('分配角色移除成功!')
							}
						})
				}
			},
			//改变状态
			async changeStatus(row) {
				//let _this = this;
				this.switchrow = row;
				const {
					data: res
				} = await
				this.$axios.post('/api/api/Us/updatestatus', this.switchrow)
				if (res.code !== 0) {
					this.$message.error(res.msg);
				}
				this.$message.success(res.msg);
				this.GetUserList();

			},
			ADD() {
				this.dialogFormVisible = true;
			},
			AClose() {
				this.$refs.addFormRef.resetFields();
			},
			SUREADD() {
				this.$refs.addFormRef.validate(vali => {
					if (!vali) return;
					let _this = this;
					this.$axios.post('/api/api/Us/AddUse', _this.addform).then(function(res) {
						if (res.data.code == 0) {
							_this.dialogFormVisible = false;
							_this.GetUserList();
							_this.$message.success(res.data.msg);
						} else if (res.data.code == -2) {
							_this.$message.error(res.data.msg);
						} else {
							_this.$message.error(res.data.msg);
						}
					}).catch(function(err) {
						_this.$message.error(res.data.msg);
					})
				})
			},
			onSubmit() {
				this.GetUserList()
			},
			GetUserList() {
				let _this = this;
				this.$axios.get('/api/api/Us/GetUsList', {
					params: {
						page: _this.page,
						limit: _this.limit,
						LoginName: _this.formInline.LoginName,
						IsLockout: _this.formInline.IsLockout
					}
				}).then(function(res) {
					console.log(res);
					_this.usList = res.data.data;
					_this.count = res.data.count;
				}).catch(function(res) {
					console.log(res);
				});
			},
			handleSizeChange(newSize) {
				console.log(newSize)
				this.limit = newSize
				this.GetUserList()
			},
			//监听页码值改变
			handleCurrentChange(newPage) {
				console.log(newPage)
				this.page = newPage
				this.GetUserList()
			},
			//修改地址对话框
			EClose() {
				this.$refs.editFormRef.resetFields();
			},
			showBox(row) {
				console.log(row);
				this.editform = row;
				this.editdialogFormVisible = true
			},
			SureEdit() {
				this.$refs.editFormRef.validate(vali => {
					if (!vali) return;
					let _this = this;
					axios.post('/api/api/Us/EditUse', _this.editform).then(function(res) {
						if (res.data.code == 0) {
							_this.editdialogFormVisible = false;
							_this.GetUserList();
							_this.$message.success("编辑成功！");
						}
					}).catch(function(err) {
						_this.$message.error("编辑失败！");
					})
				})
			},
			async Resert(Id) {
				const delresult = await this.$confirm('此操作将重置密码为000000, 是否继续?', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if (delresult !== 'confirm') {
					return this.$message.info('已经取消重置！')
				}
				let _this = this;
				_this.$axios.post('/api/api/Us/resetuser', {
					Id: Id
				}).then(function(res) {
					if (res.data.code == 0) {
						_this.GetUserList();
						_this.$message.success("重置成功！");
					}
				}).catch(function(err) {
					_this.$message.error("重置失败！");
				})
			},
			async DELETE(Id) {
				const delresult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if (delresult !== 'confirm') {
					return this.$message.info('已经取消删除！')
				}
				let _this = this;
				_this.$axios.post('/api/api/Us/DelUse', {
					Id: Id
				}).then(function(res) {
					if (res.data.code == 0) {
						_this.GetUserList();
						_this.$message.success(res.data.msg);
					} else if (res.data.code == -2) {
						_this.GetUserList();
						_this.$message.error(res.data.msg);
					} else {
						_this.$message.error(res.data.msg);
					}
				}).catch(function(err) {
					_this.$message.error(err.data.msg);
				})
			
			}
		}
	}
</script>

<style>
</style>
